<template>
  <el-form 
    :model="formData" 
    :rules="rules" 
    ref="formRef" 
    label-width="80px"
    size="large"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" placeholder="请输入用户名" />
    </el-form-item>
    
    <el-form-item label="密码" prop="pwd">
      <el-input 
        v-model="formData.pwd" 
        type="password" 
        placeholder="请输入密码" 
        show-password 
      />
    </el-form-item>
    
    <!-- 注册模式额外字段 -->
    <template v-if="mode === 'register'">
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="formData.realName" placeholder="请输入真实姓名" />
      </el-form-item>
      
      <el-form-item label="年龄" prop="age">
        <el-input-number 
          v-model="formData.age" 
          :min="1" 
          :max="100" 
          controls-position="right"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
      </el-form-item>
      
      <el-form-item label="学号" prop="stuNum">
        <el-input v-model="formData.stuNum" placeholder="请输入学号" />
      </el-form-item>
      
      <el-form-item label="班级" prop="className">
        <el-input v-model="formData.className" placeholder="请输入班级" />
      </el-form-item>
    </template>
    
    <el-form-item>
      <el-button 
        type="primary" 
        @click="handleSubmit" 
        :loading="loading"
        style="width: 100%"
      >
        {{ mode === 'login' ? '登录' : '注册' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  mode: {
    type: String,
    required: true,
    validator: (value) => ['login', 'register'].includes(value)
  }
})

const emit = defineEmits(['submit'])

const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive({
  username: '23007597',
  pwd: '123456',
  realName: '',
  age: null,
  email: '',
  stuNum: '',
  className: ''
})

// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ],
  stuNum: [
    { required: true, message: '请输入学号', trigger: 'blur' }
  ],
  className: [
    { required: true, message: '请输入班级', trigger: 'blur' }
  ]
})

// 监听模式变化，清空非必要字段
watch(() => props.mode, (newMode) => {
  if (newMode === 'login') {
    // 登录模式只保留用户名和密码
    Object.keys(formData).forEach(key => {
      if (!['username', 'pwd'].includes(key)) {
        formData[key] = key === 'age' ? null : ''
      }
    })
  }
})

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    loading.value = true
    await formRef.value.validate()
    
    // 根据模式提交不同的数据
    const submitData = props.mode === 'login' 
      ? { username: formData.username, pwd: formData.pwd }
      : { ...formData }
    
    emit('submit', submitData)
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}
</script>